<template>
    <div class="previewWrap">
        <!--放大镜效果-->
        <div class="preview">
            <vue-photo-zoom-pro
                    :width="200"
                    :height="200"
                    :out-zoomer="true"
                    :high-url="skuInfo.skuDefaultImg">
                <img :src="skuInfo.skuDefaultImg"/>
            </vue-photo-zoom-pro>
        </div>
        <!--下方的缩略图-->
        <div class="specScroll">
            <!--左按钮-->
            <a class="prev">&lt;</a>
            <!-- 中间可滑动区域 -->
            <swiper class="swiper" :options="swiperOption">
                <swiper-slide v-for="item in skuInfo.skuImageList" :key="item.id">
                    <img @click="item.isDefault ==='1' || $store.commit('product/UP_SKUIMAGELIST_ISDEFAULT',item.id)" :class="{active:item.isDefault/1===1}" :src="item.imgUrl">
                </swiper-slide>
            </swiper>
            <!--右按钮-->
            <a class="next">&gt;</a>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import VuePhotoZoomPro from 'vue-photo-zoom-pro'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
import 'swiper/css/swiper.css'
export default {
    name: "PreviewWrap",
    components: {
        VuePhotoZoomPro,
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperOption: {
                // 显示的屏数
                slidesPerView: 5,
                // 间距
                spaceBetween: 18,
                navigation: {
                    nextEl: '.next',
                    prevEl: '.prev'
                }
            }
        }
    },
    computed:{
        ...mapState("product",{
            skuInfo(state){
                return state.productInfo.skuInfo
            }
        })
    }
}
</script>

<style lang="less">
.previewWrap {
    float: left;
    width: 400px;
    position: relative;

    .preview {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #DFDFDF;

        .zoomer {
            top: 0px!important;
            width: 400px!important;
            height: 400px!important;
            //left: 10px!important;
            z-index: 999;
        }
        .selector{
            background-color: rgba(255,0,0,0.3);
        }
        img {
            width: 100%;
            height: 100%;
        }
    }

    .specScroll {
        margin-top: 5px;
        width: 400px;
        overflow: hidden;
        display: flex;
        .swiper{
            width: 100%;
            margin:0 8px;
            img {
                //float: left;
                text-align: center;
                border: 1px solid #CCC;
                padding: 2px;
                width: 50px;
                height: 50px;
                //margin-right: 20px;
                &.active{
                    border-color:red;
                }

            }
        }
        .prev, .next {
            text-align: center;
            width: 10px;
            height: 54px;
            line-height: 54px;
            border: 1px solid #CCC;
            background: #EBEBEB;
            cursor: pointer;
        }

        .prev {
            float: left;
            margin-right: 4px;
        }

        .next {
            float: right;
        }
    }
}
</style>